<template>
	<div style="height: 1200rpx;" class="content padding2 bg-white">
		<div class="backgound" v-show="show">
			<img class="back-img" src="../../static/index/background.png" alt="">
			<img class="back-compay" src="../../static/index/compayName.png" alt="">
			<img class="back-desc" src="../../static/index/desc.png" alt="">
			<img class="back-name" src="../../static/index/name.png" alt="">
		</div>
		<div class=" font56">欢迎登录</div>
		<div class=" font56  margin20"></div>
		<div class="input-area" style="background-color:#F1F1F1 ;">
			<div class="tips font24">请输入账号</div>
			<input class="font24 border-none" type="text" v-model="userName">
		</div>
		<div class="input-area margin-top-40 flex" style="background-color:#F1F1F1 ;">
			<div class="felx1">
				<div class="tips font24">请输入密码</div>
				<input class="font24 border-none " style="background-color:#F1F1F1 ;" :type="type" v-model="password">
			</div>
			<div class="flex algin-center">
				<uni-icons v-if="flag" @click="eyeChange" type="eye-filled" size="30"></uni-icons>
				<uni-icons v-else @click="eyeChange" type="eye-slash-filled" size="30"></uni-icons>

			</div>
		</div>

		<div class="margin-top-60" style="display: flex;">
			<label class="radio">
				<!-- <radio style="transform:scale(0.7)" value="r1" />我已阅读并同意：用户使用协议，服务协议，隐私权政策 -->
				<checkbox-group class="block" @change="CheckboxChange">
					<checkbox class='round blue' style="transform:scale(0.7)" :class="checkbox[0].checked?'checked':''"
						:checked="checkbox[0].checked?true:false" value="是"></checkbox>我已阅读并同意
				</checkbox-group>
			</label>
			<a @click="service" style="color: blue;">《隐私政策》</a>
		</div>
		<view style="margin-top: 40rpx;">
			<button style="border-radius: 20rpx;" @click="onLogin" class="button" type="primary">登录</button>
		</view>
		<!-- <div class="button-area margin-top-60">
			<button class="cu-btn bg-blue lg margin-right  width90" @click="onLogin">
				登录
			</button>
		</div> -->
		<!-- <div class="tips center margin-top-60 forget">忘记密码</div>
		<div class="button-area margin-top-120">
			<span class="oneKey">手机号一键注册</span>
		</div> -->
	</div>
</template>

<script>
	import accessRecordsHttp from '@/common/accessRecords/http.js';
	import {
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				userName: 'admin', //	用户名
				password: '123456', //	密码
				show: true, //	过渡页面
				type: 'password', //	输入框类型
				flag: false, // 是否显示密码
				checkbox: [{
					value: '是',
					checked: false
				}],
				//考勤系统
				accessRecords: {
					Account: '隆源',
					password: '123456'
				}
			}
		},
		onLoad: function() {
			setTimeout(() => {
				this.show = false
			}, 1000)
		},
		computed: {

		},

		methods: {
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			eyeChange() {
				this.flag = !this.flag;
				if (this.flag) {
					this.type = 'text'
				} else {

					this.type = 'password'
				}
			},
			register() {
				alert(1)
			},
			other() {
				alert(2)
			},


			...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
			onLogin: function() {
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				if (!this.checkbox[0].checked) {
					this.$tip.toast('请勾选用户隐私权政策');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password
				}
				this.loading = true;
				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					if (res.data.success) {
						// #ifdef APP-PLUS
						this.saveClientId()
						// #endif
						// #ifndef APP-PLUS
						this.$tip.success('登录成功!')
						this.queryPermissionsByUser()
						this.$Router.replaceAll({
							name: 'index'
						})
						// #endif
						//考勤系统登录
						accessRecordsHttp.sendRequest({
						url: '/api/user/user/v1/login',
						method:'post',
						data:this.accessRecords,
						success: res => {
							if (res.statusCode == 200) {
								// uni.setStorageSync('kqToken',res.response)
								uni.setStorage({
									key:'kqToken',
									data:res.data,
									success: () => {
										// this.$tip.success('考勤系统登录成功')
									}
								})
							}else{
								console.log(res.errors)
							}
						},fail:err=>{
							this.$tip.error('登录考勤系统未成功')
						}
					})
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			},
			queryPermissionsByUser(){
				this.$http.get("/sys/permission/getUserPermissionByToken", {
					params: {}
				}).then(response => {
					if (response.data.success) {
						//--------------------------------------
						//获取公司权限ID存入local storage
						let authCode = ''
						for (let i = response.data.result.auth.length - 1; i >= 0; i--) {
						  console.log(response.data.result.auth.length)
						  console.log('调用1')
						  if (response.data.result.auth[i].action.includes('company:')) {
						    authCode = response.data.result.auth[i].action.split(':')[1]
						    break
						  }
						}
						uni.setStorage({
							key:'Auth_Company_Id',
							data:authCode,
							success: () => {
								// this.$tip.success('考勤系统登录成功')
							}
						})
					}
				})
			},
			saveClientId() {
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: cid
					}
				}).then(res => {
					console.log("res::saveClientId>", res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile = this.phoneNo;
				smsParams.smsmode = "0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if (!smsParams.mobile || smsParams.mobile.length == 0) {
					this.$tip.toast('请输入手机号');
					return false
				}
				if (!checkPhone.test(smsParams.mobile)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms", smsParams).then(res => {
					if (res.data.success) {
						this.smsCountDown = 60;
						this.startSMSTimer();
					} else {
						this.smsCountDown = 0;
						this.$tip.toast(res.data.message);
					}
				});
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请填写手机号');
					return;
				}
				if (!checkPhone.test(this.phoneNo)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if (!this.smsCode || this.smsCode.length == 0) {
					this.$tip.toast('请填短信验证码');
					return;
				}
				let loginParams = {
					mobile: this.phoneNo,
					captcha: this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
					console.log("res====》", res)
					if (res.data.success) {
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index'
						})
					} else {
						this.$tip.error(res.data.message);
					}
				}).catch((err) => {
					let msg = ((err.response || {}).data || {}).message || err.data.message ||
						"请求出现错误，请稍后再试"
					this.$tip.error(msg);
				});
			},
			loginSuccess() {
				// 登陆成功，重定向到主页
				this.$Router.replace({
					name: 'index'
				})
			},
			requestFailed(err) {
				this.$message.warning("登录失败")
			},

			service(){
				uni.navigateTo({
					url: '/pages/login/privacy'
				})
			},
			privacy(){
				uni.navigateTo({
					url: '/pages/login/privacy'
				})
			},
		},
		beforeDestroy() {

		},
	}
</script>

<style lang="scss" scoped>
	.border-none {
		border: none;
		outline: none;
	}

	.backgound {
		position: fixed;
		background-color: black;
		width: 100%;
		height: 100%;
		z-index: 100;
		color: #4095ff;
		top: 0;
		left: 0;
		text-align: center;

		.back-img {
			width: 100%;
			height: 100%;
		}

		.back-compay {
			position: absolute;
			top: 428rpx;
			left: 182rpx;
			width: 368rpx;
			height: 74rpx;
		}

		.back-desc {
			position: absolute;
			top: 554rpx;
			width: 544rpx;
			height: 32rpx;
			left: 102rpx;
		}

		.back-name {
			position: absolute;
			top: 1458rpx;
			left: 242rpx;
			width: 266rpx;
			height: 52rpx;

		}

		.title {
			font-size: 60rpx;
			margin-top: 40%;
		}

		.desc {
			margin-top: 10%;
			color: #4a90fb;
		}

		.logo {
			position: absolute;
			bottom: 10%;
			width: 100%;
			color: #4a90fb;
		}
	}

	.margin-top-120 {
		margin-top: 120rpx;
	}

	.oneKey {
		padding: 20rpx 88rpx;
		color: #4591FE;
		border-radius: 50rpx;
		border: 2rpx solid #4591FE;
	}

	.eye {
		width: 40rpx;
		height: 40rpx;

	}

	.algin-center {
		align-items: center;
	}

	.flex {
		display: flex;
	}

	.felx1 {
		flex: 1
	}

	.input-area {
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.tips {
		color: #3085FE;
	}

	.forget {
		color: #4591FE;
		margin-top: 50rpx;
	}

	.padding2 {
		padding: 0 4%;
	}

	.content {
		padding-top: 298rpx;
		height: 100%;
	}

	.center {
		text-align: center;
	}

	.font56 {
		font-size: 56rpx;
	}

	.gray {
		color: gray;
	}

	.font24 {
		font-size: 24rpx;
	}

	.font20 {
		font-size: 20rpx;
	}

	.margin20 {
		margin: 10px 0;
	}

	.margin-top-60 {
		margin-top: 60rpx;
	}

	.margin-top-40 {
		margin-top: 40rpx;
	}

	.button-area {
		width: 100%;
		text-align: center;
	}

	.button {
		background-color: #4591FE;
	}

	.width90 {
		width: 80%;
	}

	.radio {
		line-height: 40rpx;
	}
</style>
